import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { Lesson4ServiceService } from '../lesson4-service.service';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-lesson4-menu',
  templateUrl: './lesson4-menu.component.html',
  styleUrls: ['./lesson4-menu.component.scss']
})
export class Lesson4MenuComponent implements OnInit, OnChanges {
  myTitle = '';
  @Input() data: any;
  @Input() menuActiveIndex = 0;
  @Output() changes: EventEmitter<any> = new EventEmitter();
  @Input()
  set title(title: string) {
    const newTitle = title.replace(/\d/g, '');
    this.myTitle = newTitle;
  }

  get title(): string { return this.myTitle; }

  titleChangeNumber = 0;

  nowTime = new Date().getTime();
  intervalId = 0;

  get heightColor() {
    return this.lesson4Service.menuHeightColor;
  }
  constructor(private lesson4Service: Lesson4ServiceService, private router: Router, private activateRoute: ActivatedRoute) {
  }

  ngOnInit() {
    this.startTimer();
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 监听title变化
    if (changes.title) {
      this.titleChangeNumber ++;
      const newTitle = changes.title.currentValue.replace(/\d/g, '');
      this.myTitle = newTitle;
    }
  }
  /**
   * 菜单点击事件
   */
  changeMenu(index, goRouter?: boolean) {
    this.data.forEach(element => {
      element.active = false;
    });
    this.data[index].active = true;
    // navigate
    if (goRouter) {
      // console.log(this.data[index].link)
      this.router.navigate([this.data[index].link], {relativeTo: this.activateRoute});
    }
    // 将切换已经激活的菜单的index告诉父组件
    this.changes.emit(index);
  }

  /**
   * 运行当前时间
   */
  startTimer() {
    window.clearInterval(this.intervalId);
    this.intervalId = window.setInterval(() => {
      this.nowTime = new Date().getTime();
    }, 1000);
  }
  /**
   * 停止运行时间
   */
  stopTimer() {
    window.clearInterval(this.intervalId);
    this.intervalId = null;
  }

  /**
   * 上一页
   */
  prevMenu() {
    this.menuActiveIndex --;
    if (this.menuActiveIndex  < 0) {
      this.menuActiveIndex = this.data.length - 1;
    }
    const isDisabledMenu = this.isDisabledMenu(this.menuActiveIndex);
    if (isDisabledMenu) {
      this.prevMenu();
    } else {
      this.changeMenu(this.menuActiveIndex, true);
    }
  }

  /**
   * 下一页
   */
  nextMenu() {
    this.menuActiveIndex ++;
    if (this.menuActiveIndex > this.data.length - 1) {
      this.menuActiveIndex = 0;
    }
    const isDisabledMenu = this.isDisabledMenu(this.menuActiveIndex);
    if (isDisabledMenu) {
      this.nextMenu();
    } else {
      this.changeMenu(this.menuActiveIndex, true);
    }
  }

  /**
   * 判断是否为disabled的菜单
   */
  isDisabledMenu(index) {
    return this.data[index].disabled;
  }

  /**
   * 获取样式
   */
  getHeightColorClass(item) {
    const classes = {};
    return item.active ? classes['list-group-item-' + this.heightColor] = true && classes : '';
  }
}
